<script lang="ts" setup>
import { pderxq } from '@/types/pder';
import { ref } from 'vue'
import { imgBaseURL,apiBaseURL } from '@/api/baseURL'
const dialogVisible = defineModel()
const parentBorder = ref(false)
const childBorder = ref(false)
const preserveExpanded = ref(false)
const tt1=reactive<any[]>([])
const tt = defineProps<{ formData: any[]}>()
watch(() => tt.formData, (value) => {
  //切断数据关联
  console.log('value:'+value)
   tt1.length = 0
   tt1.push(...value)
   

},
{ immediate: true, deep: true }
)
const yy=computed(()=>{
  return tt1.reduce((sum,item)=>sum+item.price*item.shu,0)
})
const yy1=computed(()=>{
  return tt1.reduce((sum,item)=>sum+item.shu,0)
})

const formatCurrency = (amount, currency = 'CNY') => {
  // 处理非数字情况
  if (isNaN(amount)) return '¥0.00'
  
  // 根据货币类型选择符号和格式
  const options = {
    CNY: { symbol: '¥', decimal: 2 },
    USD: { symbol: '$', decimal: 2 },
    EUR: { symbol: '€', decimal: 2 }
  }
  
  const { symbol, decimal } = options[currency] || options.CNY
  
  // 格式化格式化数字（千分位+保留小数）
  const formatted = amount.toFixed(decimal).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  
  // 拼接符号（根据货币类型调整符号位置）
  return currency === 'USD' || currency === 'EUR' 
    ? `${symbol}${formatted}`  // $1,234.56
    : `${symbol}${formatted}`  // ¥1,234.56（人民币符号在前）
}

/* const dian=()=>{
  console.log("zz")
   tt1.length=0
  tt1.push(...tt.formData)
 
  console.log(tt1)
} */

</script>

<template>

  <el-dialog  v-model="dialogVisible"  :show-close="false" width="500" center>
     <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass"></h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                    </el-icon>
                    关闭
                </el-button>
            </div>
        </template>
 
  <el-table
    :data="tt1"
    :border="parentBorder"
    :preserve-expanded-content="preserveExpanded"
    style="width: 100%"
  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">是否配料: {{ props.row.sfpl==true?"是":"否" }}</p>
          <p m="t-0 b-2" >配料: {{ props.row.pl==null?"无":props.row.pl}}</p>
       
          <h3>详情</h3>
          <el-table :data="tt1.filter(n=>n.pxqid==props.row.pxqid)" :border="childBorder">
            <el-table-column prop="images" label="图片">
                    <template #default="{ row }">
                        <el-avatar :src="imgBaseURL + row.images"></el-avatar>
                    </template>
                </el-table-column>
            <el-table-column label="商品数量" prop="shu" />
            <el-table-column label="商品价格" prop="price" />
            
            <el-table-column label="总价格" >
               <template #default="{ row }">
                    {{ row.price *row.shu }}
                </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="订单编号" prop="pbh" />
    <el-table-column label="详情编号" prop="pxqid" />
    <el-table-column label="商品名称" prop="name" />
  </el-table>
  <span>总交易金额:{{formatCurrency(yy, 'CNY')}}</span><span style="margin-left: 10px;">总交易数量:{{ yy1 }}</span>
  </el-dialog>
  
</template>
<script scope></script>


